<template>
  <view class="body">
    <view class="result">
      <view class="result_box">
        <view class="title">
          <view class="line"></view>
          <view class="text">既往史</view>
        </view>
        <view class="result_content">{{ result.elapseHis || '-' }}</view>
      </view>
      <view class="result_box">
        <view class="title">
          <view class="line"></view>
          <view class="text">过敏史</view>
        </view>
        <view class="result_content">{{ result.allergyHis || '-' }}</view>
      </view>
      <view class="result_box">
        <view class="title">
          <view class="line"></view>
          <view class="text">家族史</view>
        </view>
        <view class="result_content">{{ result.familyHis || '-' }}</view>
      </view>
      <view class="result_box">
        <view class="title">
          <view class="line"></view>
          <view class="text">外伤史</view>
        </view>
        <view class="result_content">{{ result.hurtHis || '-' }}</view>
      </view>
      <view v-if="gender == '女性'" class="result_box">
        <view class="title">
          <view class="line"></view>
          <view class="text">月经史</view>
        </view>
        <view class="result_content">{{ result.mouthHis || '-' }}</view>
      </view>
      <view v-if="gender == '女性'" class="result_box">
        <view class="title">
          <view class="line"></view>
          <view class="text">婚育史</view>
        </view>
        <view class="result_content">{{ result.marriageHis || '-' }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { watch } from 'vue'
const props = defineProps({
  gender: String,
  result: {
    type: Object,
    default: () => {}
  }
})
</script>

<style lang="scss" scoped>
.body {
  .result {
    padding: 24rpx 32rpx;
    background: #ffffff;
    border-radius: 12rpx;
    .result_box {
      padding-bottom: 40rpx;
      margin-bottom: 32rpx;
      border-bottom: 1rpx solid #e5e6eb;
      .title {
        margin-bottom: 16rpx;
        .line {
          width: 8rpx;
          height: 28rpx;
          background: #00d1b6;
          display: inline-block;
        }
        .text {
          display: inline-block;
          font-weight: 500;
          font-size: 32rpx;
          color: #222222;
          margin-left: 24rpx;
        }
      }
      .result_content {
        background: #fafafa;
        border-radius: 12rpx;
        padding: 24rpx;
        font-weight: 400;
        font-size: 30rpx;
        color: #222222;
        line-height: 54rpx;
        text-align: justify;
      }
    }
    .result_box:last-child {
      border: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }
  }
}
</style>
